<template>
	<view class="login">
		<view class="login-body">
			<view class="input-item">
				<view class="input-name">昵称</view>
				<u--input placeholder="请输入昵称" v-model="loginForm.name" border="surround"></u--input>
			</view>
			<view class="input-item">
				<view class="input-name">身份证</view>
				<u--input placeholder="请输入身份证号码" v-model="loginForm.identity" border="surround"></u--input>
			</view>
			<view class="input-item">
				<view class="input-name">手机号码</view>
				<u--input placeholder="请输入手机号码" v-model="loginForm.mobile" border="surround"></u--input>
			</view>
			<view class="input-item">
				<view class="input-name">验证码</view>
				<u--input placeholder="请输入验证码" v-model="loginForm.vcode"></u--input>
				<text class="codeBtn" @click="handleVerifyphone">获取验证码</text>
				<!--        <template slot="suffix">-->
				<!--          <u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒后重新获取"></u-code>-->
				<!--          <u-button @tap="handleVerifyphone" type="success" size="mini">dfssadasdasda</u-button>-->
				<!--        </template>-->
			</view>
			<view class="input-item">
				<view class="input-name">密码</view>
				<u--input placeholde r="请输入密码" type="password" v-model="loginForm.password"
					border="surround"></u--input>
			</view>
			<view class="input-item">
				<view class="input-name">确认密码</view>
				<u--input placeholder="请再次输入密码" type="password" v-model="loginForm.passwords"
					border="surround"></u--input>
			</view>
			<view class="input-item">
				<view class="input-name">区县</view>
				<uni-data-select :localdata="area" v-model="loginForm.areaCode" @change="getSchoolData"
					placeholder="请选择区县"></uni-data-select>
			</view>
			<view class="input-item">
				<view class="input-name">学校</view>
				<uni-data-select :localdata="school" v-model="loginForm.schoolCode" @change="getPeriodData"
					placeholder="请选择学校"></uni-data-select>
			</view>
			<view class="input-item">
				<view class="input-name">学段</view>
				<uni-data-select :localdata="period" v-model="loginForm.studyCode" @change="getPeriodData"
					placeholder="请选择学段"></uni-data-select>
			</view>
			<view class="input-item">
				<view class="input-name">学科</view>
				<uni-data-select :localdata="subject" v-model="loginForm.subjects"
					placeholder="请选择学科"></uni-data-select>
			</view>
			<view class="login-btn">
				<u-button @click="verifyClick" type="primary">立即注册</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		verifyphone,
		getCode,
		getArea,
		getSchool,
		getPeriod,
		getSubject,
		register
	} from '@/api/login'

	export default {
		data() {
			return {
				btnText: '获取验证码',
				area: [],
				school: [],
				period: [],
				subject: [],
				loginForm: {
					name: "",
					identity: "",
					vcode: "",
					password: "",
					passwords: "",
					mobile: "",
					areaCode: "",
					schoolCode: "",
					studyCode: "",
					subjects: "",
					deviceId: this.$store.state.user.deviceId,
				},
			}
		},
		created() {
			this.getAreaData();
			this.getSubjectData();
		},
		methods: {
			verifyClick(){
				let verifyData = this.loginForm
				if(verifyData.name == ""){
					uni.$u.toast("姓名不能为空");
					return false;
				}else if(verifyData.identity == ""){
					uni.$u.toast("身份证号码不能为空");
					return false;
				}else if(verifyData.mobile == ""){
					uni.$u.toast("电话号码不能为空");
					return false;
				}else if(verifyData.password == ""){
					uni.$u.toast("密码不能为空");
					return false;
				}else if(verifyData.areaCode == ""){
					uni.$u.toast("区县不能为空");
					return false;
				}else if(verifyData.schoolCode == ""){
					uni.$u.toast("学校不能为空");
					return false;
				}else if(verifyData.studyCode == ""){
					uni.$u.toast("学段不能为空");
					return false;
				}else if(verifyData.subjects == ""){
					uni.$u.toast("学科不能为空");
					return false;
				}else{
					this.handleRegister();
				}
			},
			handleRegister() {
				uni.showLoading({
					title: '正在提交信息'
				})
				register({
					userInfo: this.loginForm
				}).then(res => {
					if (res.status === 0) {
						uni.hideLoading();
						uni.$u.toast('注册成功');
						setTimeout(() => {
							this.$tab.reLaunch('/pages/login')
						}, 2000);
					} else {
						uni.$u.toast(res.result);
					}
				})
			},
			codeChange(text) {
				this.btnText = text;
			},
			handleVerifyphone() {
				verifyphone(this.loginForm.mobile).then(res => {
					uni.$u.toast(res.result);
					if (res.status === 0) {
						this.getCode();
					}
				})
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					getCode(this.loginForm.mobile).then(res => {
						if (res.status === 0) {
							uni.hideLoading();
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			getAreaData() {
				getArea().then(res => {
					res.areas.forEach(item => {
						this.area.push({
							value: item.code,
							text: item.name
						})
					})
				})
			},
			getSchoolData(e) {
				getSchool(e).then(res => {
					res.schools.forEach(item => {
						this.school.push({
							value: item.schoolCode,
							text: item.schoolName
						});
					})
				})
			},
			getPeriodData(e) {
				getPeriod(e).then(res => {
					if (res.periods.length > 0) {
						res.periods.forEach(item => {
							this.period.push({
								value: item.code,
								text: item.name
							});
						})
					}
				})
			},
			getSubjectData() {
				getSubject().then(res => {
					if (res.subjects.length > 0) {
						res.subjects.forEach(item => {
							this.subject.push({
								value: item.id.toString(),
								text: item.name
							});
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		background: #6699ff;
		display: flex;
		height: 100vh;
		width: 100vw;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.login-body {
			background: #fff;
			border-radius: 10px;
			width: 80vw;
			margin: 15px auto;
			padding: 10px 15px 0;

			.input-item {
				padding: 10px 0;
				display: flex;
				align-items: center;

				.codeBtn {
					background: #3c96f3;
					padding: 9px 3px;
					color: #fff;
				}

				.input-name {
					width: 17vw;
					font-size: 16px;
					color: #666;
					margin-bottom: 5px;
				}

				.input {
					font-size: 18px;
					color: #7f8a96;
				}
			}

			.password-option {
				margin-top: 15px;
				display: flex;
				justify-content: space-between;

				.input-text {
					font-size: 14px;
					color: #666;
				}
			}

			.login-btn {
				margin-top: 20px;
				padding-bottom: 5px;

				.u-button {
					margin-bottom: 15px;
				}
			}
		}
	}
</style>
